<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.点、线、面模型</title>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>

    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
</head>
<body>

<div id="menu" style="padding: 10px">
    <!--    <button id="menu_render">渲染</button>-->
</div>
<div id="webgl" style="border-width: 1px;border-color: blue;border-style: solid"></div>

<script>

    var scene = new THREE.Scene();  //创建场景对象Scene

    //点渲染模式
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    var material = new THREE.PointsMaterial({
        color: 0xFF0000,
        size: 8.0    //点对象像素尺寸
    });
    var points = new THREE.Points(geometry, material); //点模型对象
    scene.add(points);

    //线渲染模式
    var geometry1 = new THREE.BoxGeometry(100, 100, 100);
    var material1 = new THREE.LineBasicMaterial({
        color: 0x00ff00,
    });
    var line = new THREE.Line(geometry1, material1);//线条模型对象
    line.translateX(150);
    scene.add(line);

    //网格渲染模式
    var geometry2 = new THREE.BoxGeometry(100, 100, 100);
    // 三角形面渲染模式
    var material2 = new THREE.MeshLambertMaterial({
        color: 0x0000ff, //三角面颜色
        wireframe: true,  //显示线框
    }); //材质对象
    var mesh = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
    mesh.translateX(-150);
    scene.add(mesh);

    //辅助坐标系
    var axisHelper = new THREE.AxisHelper(250);
    scene.add(axisHelper);

    //环境光
    var ambient = new THREE.AmbientLight(0x777777);
    scene.add(ambient);//环境光添加到场景中

    //相机设置
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;  //窗口宽高比
    var s = 200;  //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 200, 100);  //设置相机位置
    camera.lookAt(scene.position);  //设置相机方向（指向的场景对象）

    //创建渲染对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xFFFFFF, 1);
    document.getElementById("webgl").appendChild(renderer.domElement);

    //--------鼠标操作---------
    function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    render();
    var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
</script>

</body>
</html>